<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>时钟</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#wrap {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 200px;
				height: 200px;
				border: 1px solid;
				border-radius: 50%;
				margin-top: -100px;
				margin-left: -100px;
			}

			#wrap>ul {
				list-style: none;
			}

			#wrap>ul li {
				position: absolute;
				top: 0px;
				left: 99px;
				width: 2px;
				height: 8px;
				background-color: black;
				transform-origin: 1px 100px;
			}

			#wrap>ul li:nth-child(5n+1) {
				height: 15px;
			}

			#wrap>.hour {
				position: absolute;
				top: 60px;
				left: 97px;
				width: 6px;
				height: 40px;
				background-color: cadetblue;
				z-index: -2;
				transform-origin: bottom center;
			}

			#wrap>.min {
				position: absolute;
				top: 40px;
				left: 98px;
				width: 4px;
				height: 60px;
				background-color: darkgray;
				z-index: -1;
				transform-origin: bottom center;
			}

			#wrap>.sec {
				position: absolute;
				top: 20px;
				left: 99px;
				width: 2px;
				height: 80px;
				background-color: coral;
				transform-origin: bottom center;
			}

			#wrap>.cen {
				position: absolute;
				top: 92px;
				left: 92px;
				width: 16px;
				height: 16px;
				background-color: darkgoldenrod;
				border-radius: 50%;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<ul></ul>
			<div class="hour"></div>
			<div class="min"></div>
			<div class="sec"></div>
			<div class="cen"></div>
		</div>
		<script type="text/javascript">
			window.onload = () => {
				const ulNode = document.querySelector("#wrap>ul");
				// JS可以直接修改html>head>style标签中的值
				const styleNode = document.createElement("style");
				// 获取时分秒
				const hourNode = document.querySelector("#wrap>.hour");
				const minNode = document.querySelector("#wrap>.min");
				const secNode = document.querySelector("#wrap>.sec");
				var liHtml = "";
				var styleHtml = "";
				for (let i = 0; i < 60; i++) {
					liHtml += "<li></li>";
					styleHtml += `#wrap>ul li:nth-child(${i+1}){transform: rotate(${i*6}deg);}`;
				}
				ulNode.innerHTML = liHtml;
				styleNode.innerHTML = styleHtml;
				document.head.appendChild(styleNode);

				rotate();
				// 时分秒针旋转
				setInterval(rotate, 1000);

				function rotate() {
					const date = new Date();
					const s = date.getSeconds();
					const m = date.getMinutes() + s / 60;
					const h = date.getHours() + m / 60;
					hourNode.style.transform = `rotate(${h*30}deg)`;
					minNode.style.transform = `rotate(${m*6}deg)`;
					secNode.style.transform = `rotate(${s*6}deg)`;
				}
			};
		</script>
	</body>
</html>
